<template>
  <div style="height: 120%;border-radius: 20px;display: flex;">
    <div style="flex: 1;">
      <el-card style="height: 95%;margin: 0 20px 0;border-radius: 20px">
        <el-calendar
            v-model="dateVal"
            style="height: 100%;">
        </el-calendar>
      </el-card>
    </div>
    <div style="flex: 1;">
      <el-card style="height: 95%;margin: 0 20px 0;border-radius: 20px">
        <div slot="title">
          <span style="font-weight: bold;">公告</span>
        </div>
        <div v-if="data.activities.length" style="height: 500px;overflow: auto;margin-top: 30px">
          <el-timeline>
            <el-timeline-item
                v-for="(activity, index) in data.activities"
                :key="index"
                :color="activity.color"
            >
              <el-card style="margin-top: 10px">
                <span style="font-weight: bold;">{{ activity.title }}</span>
                <span style="float: right;">发布人：{{ activity.username }}</span>
                <div style="width: 250px;">
                  <p style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color: darkcyan">{{ activity.content }}</p>
                </div>
                <span style="float: right;color: #0085ff;">{{ activity.time }}</span>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
        <div v-else style="display: flex;justify-content: center;">
          暂无公告数据！
        </div>
      </el-card>
    </div>
  </div>
</template>

<script lang="js" setup>
import {ref, reactive, getCurrentInstance} from "vue";
import {MoreFilled, UserFilled} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";


const {proxy} = getCurrentInstance();
const dateVal = ref(new Date());
const data = reactive({
  permList: {}, // 权限信息
  activities: [], // 公告数据
});

// 加载公告数据
const loadNotice = () => {
  proxy.$request.get('/notice/findNotice').then(res => {
    if (res.code === '200') {
      data.activities = res.data;
      data.activities.reverse();
    } else {
      ElMessage({type:'error',message:res.msg});
    }
  });
};
loadNotice();
</script>
<style scoped>

</style>